<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue组件的事件传递</title>
    <!-- 引入vue.js -->
    <script src="vue/vue.js"></script>
</head>

<body>
    <div id="app-7">
        <h2>加法</h2>
        <add-method :a="6" :b="12" @add_event="getResult"></add-method>
        <p>{{result}}</p>
    </div>

    <script>

        Vue.component('add-method', {
            props: ['a', 'b'],
            template: '<div><button @click="add">加法</button></div>',
            methods: {
                add: function () {
                    let value = 0
                    value = this.a + this.b
                    this.$emit('add_event', {
                        result: value
                    })
                }
            }
        })

        var app7 = new Vue({
            el: '#app-7',
            data: {
                result: 0
            },
            methods: {
                getResult: function (val) {
                    this.result = val.result
                }
            }
        })
    </script>
</body>

</html>
